<template>
 <div>
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogVisible" :fullscreen="true" :before-close="handleClose">    
      <el-form :inline="true" :rules="rules" ref="dataForm" :model="temp" label-width="150px" >
        <div class="form-row">
          <el-form-item label="简历文件" prop="title" >
            <div>
            <el-upload
              v-loading="uploadLoading"
              class="upload-demo"
              ref="uploadOneResume"
              action="/api/uploadFiles"
              :data="formData"
              :headers="headers"
              :on-preview="handlePreview"
              :before-upload="handleBeforeUpload"
              :on-remove="handleRemove"
              :on-change="handleChange"
              :before-remove="beforeRemove"
              :http-request="handleUploadFile"
              :file-list="resumeList">
              <el-button icon='el-icon-upload'  plain>上传</el-button>
            </el-upload>
            </div>
            <div>
              <div>文件: {{current_resume.name ? current_resume.name : '暂无'}}</div>
              <div>完成情况:{{current_resume.status ? current_resume.status : '暂无'}}</div>
              <div>错误信息:{{current_resume.error_info? current_resume.error_info : '暂无'}}</div>
            </div>
            
          </el-form-item>
        </div>
        <!-- <div class="form-row">
          <el-form-item label="加入项目" prop="project" >
            <el-select v-model="temp.project" filterable placeholder="请选择">
              <el-option
                v-for="item in project_options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div> -->
        <div class="form-content">
          <div class="form-header"> <span class="form-header-title">基本信息</span></div>
          <el-row type="flex">
            <el-col :span="10">
              <el-form-item label="姓  名" prop="candidate_name" class="form-item">
                <el-input v-model="temp.candidate_name" style="width: 200px;" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="性  别" prop="gender" class="form-item">
                <el-select style="width: 200px;" v-model="temp.gender" placeholder="请选择">
                  <el-option v-for="item in genderOptions " :key="item.key" :label="item.display_name" :value="item.key">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="10">
              <el-form-item label="出生年月" prop="birthday_date" class="form-item">
                <el-date-picker
                  v-model="temp.birthday_date"
                  type="month"
                  format="yyyy-MM" value-format="timestamp" 
                  style="width: 200px;">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="婚育情况" prop="marriage" class="form-item">
                <el-select style="width: 200px;" v-model="temp.marriage" placeholder="请选择">
                  <el-option v-for="item in  marriageOptions" :key="item.key" :label="item.display_name" :value="item.key">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="10">
              <el-form-item label="户  籍" prop="residence" class="form-item">
                <treeselect 
                class="select-item" 
                :options="city_options"  
                :load-options="loadChildrenOptions"
                :valueConsistsOf="valueConsistsOf"
                placeholder="请选择" 
                v-model="temp.residence"/>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="所在城市" prop="city" class="form-item">
                <treeselect 
                class="select-item" 
                :options="city_options"  
                  :show-count="true" 
                  placeholder="请选择" 
                  v-model="temp.city"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="10">
              <el-form-item label="手  机" prop="mobile_phone" class="form-item">
                <el-input v-model="temp.mobile_phone" style="width: 200px;" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="邮  箱" prop="email" class="form-item">
                <el-input v-model="temp.email" style="width: 200px;" ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="10">
              <el-form-item label="行业" prop="industry" class="form-item">
                <treeselect
                  class="select-item" 
                  :options="industry_options"  
                  :load-options="loadChildrenOptions"
                  :valueConsistsOf="valueConsistsOf"
                  placeholder="请选择"
                  v-model="temp.industry"
                  style="width:200px"
                >
                <label slot="option-label" slot-scope="{ node, shouldShowCount, count, labelClassName, countClassName }" :class="labelClassName">
                <span :title="node.label">{{ node.label }}</span>
              </label>
              </treeselect>
              </el-form-item>
            </el-col>
            <el-col :span="10">
                <el-form-item label="职能" prop="job" class="form-item"> 
                  <treeselect
                    class="select-item" 
                    :load-options="loadChildrenOptions"
                    :valueConsistsOf="valueConsistsOf"
                    :options="job_options"
                    placeholder="请选择"
                    v-model="temp.job"
                    style="width:200px"
                  >
                   <label slot="option-label" slot-scope="{ node, shouldShowCount, count, labelClassName, countClassName }" :class="labelClassName">
                <span :title="node.label">{{ node.label }}</span>
              </label>
                  </treeselect> 
                </el-form-item>
            </el-col>
          </el-row>
          <!-- <el-row type="flex">
            <el-col :span="10">
              <el-form-item label="Q  Q" prop="qq" class="form-item">
                <el-input v-model="temp.qq" style="width: 200px;" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="微  信" prop="weixin" class="form-item">
                <el-input v-model="temp.weixin" style="width: 200px;" ></el-input>
              </el-form-item>
            </el-col>
          </el-row> -->
          <el-row type="flex">
            <el-col :span="10">
              <el-form-item label="最高学历" prop="highest_diploma" class="form-item">
                <el-select class="select-item"  v-model="temp.highest_diploma" filterable placeholder="请选择">
                  <el-option
                    v-for="item in education_backgroud_options"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="毕业年月" prop="graduation_date" class="form-item">
                <el-date-picker
                  v-model="temp.graduation_date"
                  type="month"
                  format="yyyy-MM" 
                  value-format="timestamp" 
                  style="width: 200px;">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="10">
              <el-form-item label="语言能力" prop="language_level_group" class="form-item">
                <treeselect
                  class="select-item" 
                  :multiple="true"
                  :options="language_level_options"
                  :load-options="loadChildrenOptions"
                  :valueConsistsOf="valueConsistsOf"
                  placeholder="请选择"
                  v-model="temp.language_level_group"
                >
                                <label slot="option-label" slot-scope="{ node, shouldShowCount, count, labelClassName, countClassName }" :class="labelClassName">
                <span :title="node.label">{{ node.label }}</span>
              </label>
              </treeselect>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="意向城市" prop="preferred_city_group" class="form-item">
                <treeselect
                class="select-item" 
                :multiple="true"
                :options="city_options"
                :load-options="loadChildrenOptions"
                :valueConsistsOf="valueConsistsOf"
                placeholder="请选择"
                v-model="temp.preferred_city_group"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="10">
              <el-form-item label="当前公司" prop="company_name" class="form-item">
                <el-input v-model="temp.company_name"  ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="当前部门" prop="dept_name" class="form-item">
                <el-input v-model="temp.dept_name" ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="10">
              <el-form-item label="当前职位" prop="position" class="form-item">
                <el-input v-model="temp.position" style="width: 200px;" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="当前年薪" prop="annual_salary" class="form-item">
                <el-input v-model="temp.annual_salary" style="width: 240px;" ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div class="form-content">
          <div class="form-header"> 
            <span class="form-header-title">教育经历</span>
            <span class="form-header-button">
              <el-button plain size="small" v-on:click="addEducationItem">添加</el-button>
            </span>
          </div>
          <div class="form-table-border" v-for="(item,index) in this.temp.education_items" :key="index" >
            <el-form-item label="学校" class="form-item">
                <el-input  v-model="temp.education_items[index].school" style="width: 240px;" ></el-input>
            </el-form-item>
            <el-form-item label="时间" class="form-item">
              <el-date-picker
                v-model="temp.education_items[index].start_date"
                type="month"
                format="yyyy-MM" value-format="timestamp" 
                style="width: 110px;">
              </el-date-picker>
              <span>-></span>
              <el-date-picker
                v-model="temp.education_items[index].end_date"
                type="month"
                format="yyyy-MM" value-format="timestamp" 
                style="width: 110px;">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="学位" class="form-item">
              <el-select v-model="temp.education_items[index].diploma" filterable placeholder="请选择">
                <el-option
                  v-for="item in education_backgroud_options"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="专业" class="form-item">
                <el-input size="small" v-model="temp.education_items[index].major" style="width: 240px;"></el-input>
            </el-form-item>
            <el-form-item label="统招" class="form-item">
              <el-radio v-model="temp.education_items[index].is_unified" label="1">是</el-radio>
              <el-radio v-model="temp.education_items[index].is_unified" label="0">否</el-radio>
            </el-form-item>
            <el-form-item label="删除" class="form-item">
              <i class="el-icon-delete" v-on:click="removeEducationItem(index)"></i>
            </el-form-item>
          </div>
        </div>
        <div class="form-content">
          <div class="form-header"> 
            <span class="form-header-title">技能证书</span>
            <span class="form-header-button">
              <el-button plain size="small" v-on:click="addSkillCertItem">添加</el-button>
            </span>
          </div>
          <div class="form-table-border" v-for="(item,index) in this.temp.skill_certificate_group" :key="index" >
            <el-form-item label="证书" class="form-item-full">
              <el-input v-model="temp.skill_certificate_group[index]" style="width: 240px;" ></el-input>
              <i class="el-icon-delete" v-on:click="removeSkillCertItem(index)"></i>
            </el-form-item>
          </div> 
        </div>
        <div class="form-content">
          <div class="form-header"> 
            <span class="form-header-title">工作经历</span>
            <span class="form-header-button">
              <el-button plain size="small" v-on:click="addExperienceItem">添加</el-button>
            </span>
          </div>
          <div class="form-table-border" v-for="(item,index) in this.temp.experience_items" :key="index" >
            <el-form-item label="时间" class="form-item-full">
              <el-date-picker
                v-model="temp.experience_items[index].start_date"
                type="month"
                format="yyyy-MM" value-format="timestamp" 
                style="width: 110px;">
              </el-date-picker>
              <span>-></span>
              <span v-show="temp.experience_items[index].is_current">至今</span>
              <el-date-picker
                v-model="temp.experience_items[index].end_date"
                type="month"
                format="yyyy-MM" value-format="timestamp"
                v-show="!temp.experience_items[index].is_current"
                style="width: 110px;">
              </el-date-picker>
              <span>
                <el-checkbox v-model="temp.experience_items[index].is_current" >目前在职</el-checkbox>
              </span>
            </el-form-item>
            <el-form-item label="公司" class="form-item-full">
              <el-input size="small" v-model="temp.experience_items[index].company_name" style="width: 480px;"></el-input>
            </el-form-item>
            <el-form-item label="职位" class="form-item">
              <el-input size="small" v-model="temp.experience_items[index].function" style="width: 240px;"></el-input>
            </el-form-item>
            <el-form-item label="部门" class="form-item">
              <el-input size="small" v-model="temp.experience_items[index].dept_name" style="width: 240px;"></el-input>
            </el-form-item>
            <el-form-item label="汇报对象" class="form-item">
              <el-input size="small" v-model="temp.experience_items[index].leader" style="width: 240px;"></el-input>
            </el-form-item>
            <el-form-item label="下属人数" class="form-item">
              <el-input size="small" v-model="temp.experience_items[index].subordinates_num" style="width: 240px;"></el-input>
            </el-form-item>
            <el-form-item label="工作内容" class="form-item-full">
              <el-input type="textarea" :rows="4" size="small" v-model="temp.experience_items[index].work_content" style="width: 480px;"></el-input>
            </el-form-item>
            <el-form-item label="工作业绩" class="form-item-full">
              <el-input type="textarea" :rows="4" size="small" v-model="temp.experience_items[index].work_performance" style="width: 480px;"></el-input>
            </el-form-item>
            <el-form-item label="离职原因" class="form-item-full">
              <el-input type="textarea" :rows="2" size="small" v-model="temp.experience_items[index].off_reason" style="width: 480px;"></el-input>
            </el-form-item>
            <el-form-item label="删除" class="form-item">
              <i class="el-icon-delete" v-on:click="removeExperienceItem(index)"></i>
            </el-form-item>
          </div>
        </div>
        <div class="form-content">
         <div class="form-header"> 
            <span class="form-header-title">项目经验</span>
            <span class="form-header-button">
              <el-button plain size="small" v-on:click="addProductItem">添加</el-button>
            </span>
          </div>
          <div class="form-table-border" v-for="(item,index) in this.temp.product_items" :key="index" >
            <el-form-item label="时间" class="form-item-full">
              <el-date-picker
                v-model="temp.product_items[index].start_date"
                type="month"
                format="yyyy-MM" value-format="timestamp" 
                style="width: 110px;">
              </el-date-picker>
              <span>-></span>
              <span v-show="temp.product_items[index].is_current">至今</span>
              <el-date-picker
                v-model="temp.product_items[index].end_date"
                type="month"
                format="yyyy-MM" value-format="timestamp"
                v-show="!temp.product_items[index].is_current"
                style="width: 110px;">
              </el-date-picker>
              <span>
              <el-checkbox v-model="temp.product_items[index].is_current">目前在职</el-checkbox>
              </span>
            </el-form-item>

            <el-form-item label="项目名称" class="form-item-full">
              <el-input size="small" v-model="temp.product_items[index].product_name" style="width: 400px;"></el-input>
            </el-form-item>
            <el-form-item label="项目简介" class="form-item-full">
              <el-input type="textarea" :rows="2" size="small" v-model="temp.product_items[index].product_desc" style="width: 400px;"></el-input>
            </el-form-item>
            <el-form-item label="项目职务" class="form-item-full">
              <el-input size="small" v-model="temp.product_items[index].product_position" style="width: 400px;"></el-input>
            </el-form-item>
            <el-form-item label="项目职责" class="form-item-full">
              <el-input type="textarea" :rows="2" size="small" v-model="temp.product_items[index].product_function" style="width: 400px;"></el-input>
            </el-form-item>
            <el-form-item label="项目业绩" class="form-item-full">
              <el-input type="textarea" :rows="2" size="small" v-model="temp.product_items[index].product_achievement" style="width: 400px;"></el-input>
            </el-form-item>
            <el-form-item label="删除" class="form-item">
              <i class="el-icon-delete" v-on:click="removeProductItem(index)"></i>
            </el-form-item>
          </div>
        </div>
        <div class="form-content">
          <div class="form-header"> <span class="form-header-title">自我介绍</span></div>
          <div class="form-row">
            <el-form-item label="介绍" class="form-item-full">
              <el-input type="textarea" :rows="4" size="small" v-model="temp.self_introduction" style="width: 480px;"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="form-content">
          <div class="form-header"> <span class="form-header-title">培训经历</span></div>
          <div class="form-row">
            <el-form-item label="介绍" class="form-item-full">
              <el-input type="textarea" :rows="4" size="small" v-model="temp.training_experience" style="width: 480px;"></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">{{$t('table.cancel')}}</el-button>
        <el-button v-if="dialogStatus=='create'" type="primary" @click="createData">{{$t('table.confirm')}}</el-button>
        <el-button v-else type="primary" @click="updateData">{{$t('table.confirm')}}</el-button>
      </div>
    </el-dialog>
 </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import API from '@/utils/backend_api'
import Static_Data from '@/data/index'
import { getToken } from '@/utils/auth' // 验权
import { mapGetters } from 'vuex'
import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
const simulateAsyncOperation = fn => {
  setTimeout(fn, 200)
}
export default {
  name: 'candidateDialog',
  props: {
    id: {
      type: String,
      default: '' // 这样可以指定默认的值
    },
    visible: {
      type: Boolean,
      default: false // 这样可以指定默认的值
    },
    status: {
      type: String,
      default: 'create'
    }
  },
  components: { Treeselect },
  data() {
    return {
      rules: {
        candidate_name: [{ required: true, message: '必填项', trigger: 'change' }],
        mobile_phone: [{ required: true, message: '必填项', trigger: 'change' }],
        company_name: [{ required: true, message: '必填项', trigger: 'change' }],
        position: [{ required: true, message: '必填项', trigger: 'change' }],
        industry: [{ required: true, message: '必填项', trigger: 'change' }],
        job: [{ required: true, message: '必填项', trigger: 'change' }]
      },
      valueConsistsOf: 'ALL',
      dedup_policy: 'save',
      uploadLoading: false,
      current_resume: {
        name: '',
        size: 0,
        status: '',
        error_info: ''
      },
      headers: {
        Authorization: getToken(),
        smail: '*_~'
      },
      resumeList: [],
      showResumeList: [],
      formData: {
        notify_url: '',
        token: getToken(),
        dedup_policy: 'save' // ignore
      },
      city_options: Static_Data.mnc_city,
      marriageOptions: Static_Data.marriage,
      genderOptions: Static_Data.gender,
      language_level_options: Static_Data.language_level,
      education_backgroud_options: Static_Data.education_backgroud,
      industry_options: Static_Data.mnc_industry,
      job_options: Static_Data.mnc_job,
      temp: {
        candidate_name: '',
        industry: '',
        job: '',
        mobile_phone: '',
        city: '',
        annual_salary: '0',
        birthday_date: '',
        company_name: '',
        dept_name: '',
        status: '',
        newest_contact_time: '',
        graduation_date: '',
        position: '',
        highest_diploma: '',
        gender: '0',
        company_group: [],
        language_level_group: [],
        school_tag_group: [],
        email: '',
        residence: '',
        qq: '',
        weixin: '',
        candidate_type: '',
        self_introduction: '',
        marriage: '',
        preferred_city_group: [],
        education_items: [{
          start_date: '',
          end_date: '',
          diploma: '',
          school: '',
          major: '',
          is_unified: '1'
        }],
        experience_items: [{
          start_date: '',
          end_date: '',
          company_name: '',
          position: '',
          dept_name: '',
          work_content: '',
          off_reason: '',
          work_performance: '',
          leader: '',
          subordinates_num: '',
          is_current: '0'
        }],
        product_items: [{
          product_name: '',
          product_desc: '',
          start_date: '',
          end_date: '',
          is_current: '0',
          product_function: '',
          product_position: '',
          product_achievement: '',
          company_name: ''
        }],
        skill_certificate_group: ['']
      },
      dialogStatus: '',
      dialogVisible: false,
      textMap: {
        update: '编辑人才',
        create: '新增人才'
      },
      fileList: [],
      project_options: [],
      project: ''
    }
  },
  filters: {
    valuetobool: function(value) {
      if (value) {
        return true
      }
      return false
    }
  },
  watch: {
    id: function(val, oldVal) {
        if (val !== '' && this.status === 'update') {
        API.candidate.get(val).then(response => {
          this.temp = response.data
          if (this.temp.experience_items && this.temp.experience_items.length > 0) {
            this.temp.experience_items = this.temp.experience_items.map(item => {
              if (item.is_current === '1') {
                item.is_current = true
              } else {
                item.is_current = false
              }
              return item
            })
          }
          if (this.temp.product_items && this.temp.product_items.length > 0) {
            this.temp.product_items = this.temp.product_items.map(item => {
              if (item.is_current === '1') {
                item.is_current = true
              } else {
                item.is_current = false
              }
              return item
            })
          }
          if (this.temp.language_level_group) {
            this.temp.language_level_group = JSON.parse(this.temp.language_level_group)
          }
          if (this.temp.company_group) {
            this.temp.company_group = JSON.parse(this.temp.company_group)
          }
          if (this.temp.school_tag_group) {
            this.temp.school_tag_group = JSON.parse(this.temp.school_tag_group)
          }
          if (this.temp.preferred_city_group) {
            this.temp.preferred_city_group = JSON.parse(this.temp.preferred_city_group)
          }
          if (this.temp.skill_certificate_group) {
            this.temp.skill_certificate_group = JSON.parse(this.temp.skill_certificate_group)
          }
          if (this.temp.function) {
            this.temp.job = this.temp.function
          }
        })
      }
    },
    visible: function(val, oldVal) {
      console.log('当前值为：' + val, '旧值为：' + oldVal)
      if (this.status === 'update' || this.id !== '') {
        // API.candidate.get(this.id)
      } else {
        this.resetData()
      }
      this.dialogVisible = val
    },
    status: function(val, oldVal) {
      console.log('当前值为：' + val, '旧值为：' + oldVal)
      this.dialogStatus = val
    },
    socket: {
      handler(val, oldVal) {
        if (val.message && val.message !== '') {
          const msgObj = JSON.parse(val.message)
          console.log('candidate msgObj =', msgObj)
          /* 处理通知，刷新消息通知 */
          if (msgObj.type && msgObj.type === 'upload') {
            let isDo = false
            for (const resume of this.showResumeList) {
              if (resume.uid === Number(msgObj.uid)) {
                if (msgObj.code === 200) {
                  resume.status = msgObj.content
                  this.current_resume.status = resume.status
                  this.getData(resume.uuid)
                  isDo = true
                }
                if (msgObj.code === 400) {
                  resume.status = msgObj.content
                  this.current_resume.status = resume.status
                  this.current_resume.error_info = msgObj.error_info
                  this.getData(resume.uuid)
                  isDo = true
                }
              }
            }
            if (isDo) {
              this.uploadLoading = false
              this.resumeList = []
              this.showResumeList = []
            }
          }
        }
      },
      deep: true
    }
  },
  computed: {
    ...mapGetters([
      'socket'
    ])
  },
  methods: {
    getData(val) {
      API.candidate.get(val).then(response => {
        this.temp = response.data
        if (this.temp.experience_items && this.temp.experience_items.length > 0) {
          this.temp.experience_items = this.temp.experience_items.map(item => {
            if (item.is_current === '1') {
              item.is_current = true
            } else {
              item.is_current = false
            }
            return item
          })
        }
        if (this.temp.product_items && this.temp.product_items.length > 0) {
          this.temp.product_items = this.temp.product_items.map(item => {
            if (item.is_current === '1') {
              item.is_current = true
            } else {
              item.is_current = false
            }
            return item
          })
        }
        if (this.temp.residence) {
          if (this.temp.city.length === 2) {
            this.residence_arr = [this.temp.city]
          }
          if (this.temp.city.length === 4) {
            this.residence_arr = [this.temp.city.substr(0, 2), this.temp.city]
          }
        }
        if (this.temp.language_level_group) {
          this.temp.language_level_group = JSON.parse(this.temp.language_level_group)
        }
        if (this.temp.company_group) {
          this.temp.company_group = JSON.parse(this.temp.company_group)
        }
        if (this.temp.school_tag_group) {
          this.temp.school_tag_group = JSON.parse(this.temp.school_tag_group)
        }
        if (this.temp.preferred_city_group) {
          this.temp.preferred_city_group = JSON.parse(this.temp.preferred_city_group)
        }
        if (this.temp.skill_certificate_group) {
          this.temp.skill_certificate_group = JSON.parse(this.temp.skill_certificate_group)
        }
      })
    },
    handleChange(file, fileList) {
      console.log(file, fileList)
      if (fileList && fileList.length > 0) {
        this.showResumeList = fileList.map(item => {
          return {
            uid: item.uid,
            name: item.name,
            percentage: item.percentage,
            size: item.size,
            status: item.status,
            dedup_policy: this.dedup_policy
          }
        })
      }
    },
    handleUploadFile(param) {
      console.log('handleUploadFile:', param)
      const that = this
      this.uploadLoading = true
      API.candidate.resume({ files: JSON.stringify(this.showResumeList) }).then(response => {
        console.log('------ submitUpload------', response.data)
        if (response.data && response.data.task_id && response.data.resumes) {
          console.log(this.showResumeList)
          console.log(response.data.resumes)
          this.showResumeList.forEach(resume => {
            response.data.resumes
              .filter(x => { return Number(x.uid) === resume.uid })
              .forEach(x => {
                resume.task_id = response.data.task_id
                resume.uuid = x.uuid
                console.log('resume:', resume)
              })
          })
          console.log('showResumeList=', this.showResumeList)
          if (that.showResumeList.length === 1 && that.showResumeList[0].uuid && that.showResumeList[0].task_id) {
            that.current_resume.name = that.showResumeList[0].name
            const fileObj = param.file
            // 接收上传文件的后台地址
            const FileController = param.action
            // FormData 对象
            const form = new FormData()
            // 文件对象
            form.append('file', fileObj)
            // 其他参数
            form.append('dedup_policy', that.dedup_policy)
            const notify_url = 'http://system.mnc-management.com:8333/api/candidate/task/' + that.showResumeList[0].task_id + '/resume/' + that.showResumeList[0].uuid
            form.append('notify_url', notify_url)
            form.append('token', getToken())
            // XMLHttpRequest 对象
            const xhr = new XMLHttpRequest()
            xhr.open('post', FileController, true)
            xhr.setRequestHeader('Authorization', getToken())
            xhr.upload.addEventListener('progress', function name(params) {
              // event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0
              if (params.lengthComputable) {
                that.current_resume.status = '上传中' + Math.round(params.loaded / params.total * 100) + '%'
              }
            }, false)
            xhr.onload = function() {
              console.log('success')
              that.current_resume.status = '正在处理中'
            }
            xhr.send(form)
          }
        }
      })
    },
    addSkillCertItem() {
      this.temp.skill_certificate_group.push('')
    },
    removeSkillCertItem(index) {
      this.temp.skill_certificate_group.splice(index, 1)
    },
    addEducationItem() {
      this.temp.education_items.push({
        start_date: '',
        end_date: '',
        diploma: '',
        school: '',
        major: '',
        is_unified: '1'
      })
    },
    removeEducationItem(index) {
      this.temp.education_items.splice(index, 1)
    },
    addExperienceItem() {
      this.temp.experience_items.push({
        start_date: '',
        end_date: '',
        company_name: '',
        position: '',
        dept_name: '',
        work_content: '',
        off_reason: '',
        work_performance: '',
        leader: '',
        subordinates_num: '',
        is_current: false
      })
    },
    removeExperienceItem(index) {
      this.temp.experience_items.splice(index, 1)
    },
    addProductItem() {
      this.temp.product_items.push({
        product_name: '',
        product_desc: '',
        start_date: '',
        end_date: '',
        is_current: false,
        product_function: '',
        product_position: '',
        product_achievement: '',
        company_name: ''
      })
    },
    removeProductItem(index) {
      this.temp.product_items.splice(index, 1)
    },
    createData(data) {
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          return
        }
        console.log('----------------create candidate----------')
        const add_experience_items = this.temp.experience_items.map(item => {
          if (item.is_current) {
            item.is_current = 1
          } else {
            item.is_current = 0
          }
          return item
        })
        const add_product_items = this.temp.product_items.map(item => {
          if (item.is_current) {
            item.is_current = 1
          } else {
            item.is_current = 0
          }
          return item
        })
        const add_data = {
          id: this.temp.id ? this.temp.id : '',
          candidate_name: this.temp.candidate_name || '',
          industry: this.temp.industry || '',
          function: this.temp.job || '',
          mobile_phone: this.temp.mobile_phone || '',
          city: this.temp.city || '',
          annual_salary: this.temp.annual_salary || '0',
          birthday_date: this.temp.birthday_date || '',
          company_name: this.temp.company_name || '',
          dept_name: this.temp.dept_name || '',
          status: this.temp.status || '',
          newest_contact_time: this.temp.newest_contact_time || '',
          graduation_date: this.temp.graduation_date || '',
          position: this.temp.position || '',
          highest_diploma: this.temp.highest_diploma || '',
          gender: this.temp.gender || '0',
          preferred_city_group: this.temp.preferred_city_group,
          company_group: [],
          language_level_group: this.temp.language_level_group,
          school_tag_group: [],
          email: this.temp.email || '',
          residence: this.temp.residence || '',
          qq: this.temp.qq || '',
          weixin: this.temp.weixin || '',
          candidate_type: this.temp.candidate_type || '',
          self_introduction: this.temp.self_introduction || '',
          training_experience: this.temp.training_experience || '',
          marriage: this.temp.marriage || '',
          skill_certificate_group: this.temp.skill_certificate_group || [],
          education_items: JSON.stringify(this.temp.education_items || []),
          experience_items: JSON.stringify(add_experience_items || []),
          product_items: JSON.stringify(add_product_items || [])
        }
        console.log(add_data)
        if (add_data.id && add_data.id !== '') {
          API.candidate.update(add_data).then((response) => {
            console.log(response)
            this.resetData()
            this.$emit('closeDialog', { type: 'update_success', data: response.data })
            this.$notify({
              title: '成功',
              message: '更新成功',
              type: 'success',
              duration: 2000
            })
          })
        } else {
          API.candidate.add(add_data).then((response) => {
            console.log(response)
            this.resetData()
            this.$emit('closeDialog', { type: 'create_success', data: response.data })
            this.$notify({
              title: '成功',
              message: '创建成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    updateData(data) {
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          return
        }
        console.log('----------------update candidate----------')
        const update_experience_items = this.temp.experience_items.map(item => {
          if (item.is_current) {
            item.is_current = 1
          } else {
            item.is_current = 0
          }
          return item
        })
        const update_product_items = this.temp.product_items.map(item => {
          if (item.is_current) {
            item.is_current = 1
          } else {
            item.is_current = 0
          }
          return item
        })
        const update_data = {
          id: this.temp.id,
          candidate_name: this.temp.candidate_name || '',
          industry: this.temp.industry || '',
          function: this.temp.job || '',
          mobile_phone: this.temp.mobile_phone || '',
          city: this.temp.city || '',
          annual_salary: this.temp.annual_salary || '0',
          birthday_date: this.temp.birthday_date || '',
          company_name: this.temp.company_name || '',
          dept_name: this.temp.dept_name || '',
          status: this.temp.status || '',
          newest_contact_time: this.temp.newest_contact_time || '',
          graduation_date: this.temp.graduation_date || '',
          position: this.temp.position || '',
          highest_diploma: this.temp.highest_diploma || '',
          gender: this.temp.gender || '0',
          preferred_city_group: this.temp.preferred_city_group,
          company_group: [],
          language_level_group: this.temp.language_level_group,
          school_tag_group: [],
          email: this.temp.email || '',
          residence: this.temp.residence || '',
          qq: this.temp.qq || '',
          weixin: this.temp.weixin || '',
          candidate_type: this.temp.candidate_type || '',
          self_introduction: this.temp.self_introduction || '',
          training_experience: this.temp.training_experience || '',
          marriage: this.temp.marriage || '',
          skill_certificate_group: this.temp.skill_certificate_group || [],
          education_items: JSON.stringify(this.temp.education_items || []),
          experience_items: JSON.stringify(update_experience_items || []),
          product_items: JSON.stringify(update_product_items || [])
        }
        console.log(update_data)
        API.candidate.update(update_data).then((response) => {
          console.log(response)
          this.resetData()
          this.$emit('closeDialog', { type: 'update_success', data: response.data })
          this.$notify({
            title: '成功',
            message: '更新成功',
            type: 'success',
            duration: 2000
          })
        })
      })
    },
    handleCancel() {
      this.resetData()
      this.$emit('closeDialog', { type: 'cancel', data: {}})
    },
    handleClose(done) {
      this.resetData()
      this.$emit('closeDialog', { type: 'cancel', data: {}})
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    handleBeforeUpload(file) {
    },
    beforeRemove(file, fileList) {
      return this.$confirm('确定移除 "' + file.name + '"?')
    },
    loadChildrenOptions({ action, parentNode, callback }) {
      if (action === LOAD_CHILDREN_OPTIONS) {
        switch (parentNode.id) {
          default: /* empty */
            simulateAsyncOperation(() => {
              callback()
            })
        }
      }
    },
    resetData() {
      this.current_resume = {
        name: '',
        size: 0,
        status: '',
        error_info: ''
      }
      this.temp = {
        candidate_name: '',
        industry: '',
        job: '',
        mobile_phone: '',
        city: '',
        annual_salary: '0',
        birthday_date: '',
        company_name: '',
        dept_name: '',
        status: '',
        newest_contact_time: '',
        graduation_date: '',
        position: '',
        highest_diploma: '',
        gender: '0',
        company_group: [],
        language_level_group: [],
        school_tag_group: [],
        email: '',
        residence: '',
        qq: '',
        weixin: '',
        candidate_type: '',
        self_introduction: '',
        marriage: '',
        preferred_city_group: [],
        education_items: [{
          start_date: '',
          end_date: '',
          diploma: '',
          school: '',
          major: '',
          is_unified: '1'
        }],
        experience_items: [{
          start_date: '',
          end_date: '',
          company_name: '',
          position: '',
          dept_name: '',
          work_content: '',
          off_reason: '',
          work_performance: '',
          leader: '',
          subordinates_num: '',
          is_current: '0'
        }],
        product_items: [{
          product_name: '',
          product_desc: '',
          start_date: '',
          end_date: '',
          is_current: '0',
          product_function: '',
          product_position: '',
          product_achievement: '',
          company_name: ''
        }],
        skill_certificate_group: ['']
      }
    }
  }
}
</script>
<style scoped>
  .form-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content:flex-start;
  }
  .form-content{
    /* overflow:hidden; */
    border: 1px solid #ddd;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    box-sizing: content-box;
    width: 80%;
    margin-left:5%;
  }
  .form-header {
    height: 40px;
    line-height: 15px;
    color: #676a6c;
    background-color: #F9F9F9;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    border: 1px solid #ddd;
  }
  .form-table-border{
    margin: 1px 1px 1px 1px;
    border: 1px solid #ddd;
  }
  .form-header-button {
    float: right;
    margin: 0.3em 1em 0;
  } 
  .form-header-title{
    float: left;
    margin: 1.1em 1em 0.2em;
  }
  .form-table-border{
    margin: 1px 1px 1px 1px;
    border: 1px solid #ddd;
  }
  .select-item {
    display: inline-block;
    vertical-align: middle;
    width: 220px;
  }
</style>

